<template>
  <van-cell-group inset>
    <van-cell>
      <template #icon>
        <van-image class="img"
                   src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                   round/>
      </template>
      <template #title>
        <h2 class="userFont">{{ userInfo.userName }}</h2>
        <h4 class="userFont">账号:{{ userInfo.userAccount }}</h4>
      </template>
    </van-cell>

    <van-cell title="性别">
      {{ userInfo.gender }}
    </van-cell>

    <van-cell title="邮箱">
      {{ userInfo.email }}
    </van-cell>

    <van-cell title="电话">
      {{ userInfo.phone }}
    </van-cell>

    <van-cell title="用户类型">
      {{ userInfo.userRole === 1 ? '管理员' : userInfo.userRole === 0 ? '普通用户' : '快递员' }}
    </van-cell>

    <van-cell title="邮寄信息" is-link/>
    <div className="editUser">
      <van-button type="primary" round style="width: 150px" @click="onEdit">
        编辑信息
      </van-button>
    </div>
    <div className="logout">
      <van-button type="primary" round style="width: 150px" @click="onLogout">
        退出登录
      </van-button>
    </div>
  </van-cell-group>
</template>

<script setup>
import route from "../config/route";
import {ref} from "vue";
import {currentUser} from "../config/globalConfig";
import {userLogout} from "../api/request";
import {Toast} from "vant";

const userInfo = ref(currentUser)
// 编辑按钮
const onEdit = () => {
  route.push('/editUser')
}

// 退出登录
const onLogout = async () => {
  // 请求退出登录 请求异常的话不会进行页面跳转
  try {
    let result = await userLogout(currentUser)
    result = result.data
    if (result.statusCode === 0) {
      Toast('退出登录')
      currentUser.token = ''
      window.localStorage.removeItem('currentUser')
    } else {
      Toast(result.message)
    }
  } catch (err) {
    Toast('退出登录请求出现错误')
    console.log(err)
    return
  }

  currentUser.id = 0
  await route.push('/login')
}
// 修改信息
const onUpdateInfo = () => {

}

</script>

<style scoped>
.img {
  width: 100px;
  height: 100px;
}

.userFont {
  padding-left: 20px
}

.logout {
  padding-top: 5%;
  padding-left: 30%;
}

.editUser {
  padding-top: 20%;
  padding-left: 30%;
}
</style>